<script lang="ts" setup>
import { defineEmits, reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import {
  Button,
  Descriptions,
  Form,
  Space,
  Input as Textarea, message, Select,
} from 'ant-design-vue';

// 定义要发送的事件
type EmitEvents = {
  pushData: {};
};
const emit = defineEmits<EmitEvents>();
const form = ref({});

 const reason =ref('');

const [Modal, modalApi] = useVbenModal({
  class: 'w-3/6',
  footer: false,
  onCancel() {
    modalApi.close();
  },
  onConfirm() {},
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return;
    const { data } = modalApi.getData<Record<string, any>>();
    console.log(data);
    form.value = data;
  },
});

/**
 * 处理推送按钮点击事件
 */
function handlePush(row: any) {
  // 验证申请原因是否填写

  if (reason.value=='') {
    message.success('请填写修改原因');
    return;
  }
  // 发送数据到父组件，确保总是数组格式
  emit('pushData', reason.value);

  // 清空表单并关闭模态框
  modalApi.close();
}
</script>

<template>
  <Modal title="存在价格变更确认">
    <div class="price-change-content">
      <!-- 商品价格变更 -->
      <div
        v-if="form.goodsPrice && form.goodsPrice.length > 0"
        class="price-section"
      >
        <h3 class="section-title">货品资料价格</h3>
        <Descriptions column="{2}" bordered>
          <template v-for="priceItem in form.goodsPrice" :key="priceItem.field">
            <Descriptions.Item
              :label="priceItem.fieldName"
              :label-style="{ width: '140px' }"
            >
              <div class="price-comparison">
                <div class="price-item">
                  <span class="price-label">改前:</span>
                  <span class="price-value">{{ priceItem.origin }}</span>
                </div>
                <div class="price-item">
                  <span class="price-label">改后:</span>
                  <span
                    class="price-value"
                    :class="{
                      'price-increase':
                        priceItem.destination > priceItem.origin,
                      'price-decrease':
                        priceItem.destination < priceItem.origin,
                    }"
                  >
                    {{ priceItem.destination }}
                  </span>
                </div>
              </div>
            </Descriptions.Item>
          </template>
        </Descriptions>
      </div>

      <!-- 供应商价格变更 -->
      <div
        v-if="form.supplyPrice && form.supplyPrice.length > 0"
        class="price-section"
      >
        <h3 class="section-title">货品供应商价格</h3>
        <Descriptions :column="1" bordered>
          <template
            v-for="priceItem in form.supplyPrice"
            :key="`${priceItem.goods_supply_id}-${priceItem.field}`"
          >
            <Descriptions.Item
              :label="priceItem.fieldName"
              :label-style="{ width: '140px' }"
            >
              <div class="price-comparison">
                <div class="price-item">
                  <span class="price-label">改前:</span>
                  <span class="price-value">{{ priceItem.origin }}</span>
                </div>
                <div class="price-item">
                  <span class="price-label">改后:</span>
                  <span
                    class="price-value"
                    :class="{
                      'price-increase':
                        priceItem.destination > priceItem.origin,
                      'price-decrease':
                        priceItem.destination < priceItem.origin,
                    }"
                  >
                    {{ priceItem.destination }}
                  </span>
                </div>
              </div>
            </Descriptions.Item>
          </template>
        </Descriptions>
      </div>

      <!-- 申请修改原因 -->
      <div class="reason-section">
        <Form
          layout="horizontal"
          :label-col="{ span: 2 }"
          :wrapper-col="{ span: 22 }"
          style="width: 100%"
        >
          <Form.Item label="申请修改原因" required label-align="right">
            <Textarea
              v-model="reason"
              v-model:value="reason"
              placeholder="请输入申请修改原因"
              :auto-size="{ minRows: 5, maxRows: 20 }"
              :maxlength="500"
              show-count
              style="width: 100%"
            />
          </Form.Item>
        </Form>
      </div>
     <span style="color: red;font-size: 24px">此处修改的价格不涉及大货采购单价格，一般情况下修改了采购价需另外去修改大货采购单的价格!!!!!</span>
      <!-- 确认按钮 -->
      <div class="modal-footer">
        <Space>
          <Button @click="modalApi.close()">取消</Button>
          <Button type="primary" @click="handlePush(form)">确认提交</Button>
        </Space>
      </div>
    </div>
  </Modal>
</template>
<style lang="scss" scoped>
.price-change-content {
  max-height: 60vh;
  overflow-y: auto;
}

.price-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.price-comparison {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.price-value {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.price-increase {
  color: #ff4d4f;
}

.price-decrease {
  color: #52c41a;
}

.modal-footer {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.reason-section {
  margin-bottom: 24px;
  width: 100%;
}

:deep(.ant-form-horizontal) {
  width: 100%;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
  width: 100%;
}

:deep(.ant-form-item-label > label) {
  font-weight: 500;
}

:deep(.ant-form-item-control-wrapper) {
  width: 100%;
}

:deep(.ant-form-item-control) {
  width: 100%;
}

:deep(.ant-input) {
  width: 100% !important;
}

:deep(.ant-input-affix-wrapper) {
  width: 100% !important;
}

:deep(.ant-input-affix-wrapper textarea) {
  min-height: 120px;
  width: 100% !important;
}
</style>
